<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .click{
        position: relative;
        width: 100px;
        height: 100px;
        background: #58c;
        overflow: hidden;
        border-radius: 50%;
    }
    .click::before{
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border: 1px solid #000;
    }
    label{
        padding-left: 30px;
    }
    input{
        position: relative;
        padding-left: 30px;
        background: #58c;
    }
    input[checked] + label{
        background: red;
    }
    input[checked]:disabled + label{
        /* content: '';
        display: block;
        width: 30px;
        height: 100%;
        left: 0;
        position: absolute; */
        background: #000;
    }
    .hiddenAll{
        /* position: fixed; */
        width: 300px;
        height: 300px;
        top: scle() ;
        left: 50%；

    }
    .loading{
        text-indent: 999px;
        width: 100px;
        height: 100px;
        background: url(./../static/loader.png) left no-repeat;
        background-size: auto 100px;
        overflow: hidden;
        animation: load 1s infinite steps(8);
        -o-animation-play-state: paused;
        -webkit-animation-play-state: paused;
        -moz-animation-play-state: paused;
        animation-play-state: paused;
    }
    .loading:hover{
        -o-animation-play-state: running;
        -webkit-animation-play-state: running;
        -moz-animation-play-state: running;
        animation-play-state: running;
        
        /* animation: load 1s infinite steps(8); */
    }
    @keyframes load {
        to {
            background-position: -800px 0;
        }
    }
    .write{
        width: 256px;
        white-space: nowrap;
        border-right: 1px solid transparent;
        overflow: hidden;
        animation: typing 6s infinite steps(16) alternate,caret 0.8s infinite  steps(1);
    }
    @keyframes typing {
        from {
            width: 0;
        }
    }
    @keyframes caret {
        50% {
            border-color: #000;
        }
    }
    </style>
</head>
<body>
    <div>this is the div element</div>
    <div>this is the div element1</div>
    <div>this is the div element2</div>
    <div>this is the div element3</div>
    <span>this is a span element</span>
    <div class="click" onclick="ss()">click</div>
    <hr>
    <input type="checkbox" name="one"><label for="one"> one</label>
    <input type="checkbox" name="two"><label for="two"> two</label>
    <input type="checkbox" checked name="three"><label for="three"> three</label>
    <input type="checkbox" disabled name="four"><label for="four"> four</label>
    <div class="hiddenAll">box shadow</div>
    <div class="loading">loading</div>
    <div class="write">这是一个模拟打字的段落，多个字！</div>


    <script>
      function ss() {
          console.log('click')
      }
    </script>
</body>
</html>